<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>美团打车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .nav {
            height: 66px;
            line-height: 66px;
        }

        .nav .left {
            float: left;

            margin-left: 65px;
        }

        .nav .left {
            height: 30px;
            width: 220px;
        }

        .nav .left img {
            width: 100%;
            vertical-align: middle;
        }

        .nav .right {
            float: right;
        }

        .nav .right ul {
            margin-right: 64px;
        }

        .nav .right li {
            float: left;
            margin: 0 20px;
            font-size: 12px;
        }

        .banner {
            position: relative;

        }

        .banner img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }

        .banner ul {
            position: absolute;
            bottom: 85px;
            left: 50%;
            margin-left: -120px;
        }

        .banner li {
            float: left;
            width: 70px;
            height: 8px;
            background-color: #fff;
            margin: 0 25px;
            cursor: pointer;
        }

        .banner .selected {
            background-color: #fdf100;
        }

        .info .pic {
            float: left;

        }

        .pic img {
            width: 420px;
            margin: 0 80px 30px;
        }

        .info .content {
            margin-right: 60px;
        }

        .info .content h3 {
            height: 70px;
            line-height: 70px;
            font-size: 20px;
            text-align: center;
        }

        .info .content p {
            font-size: 16px;
            text-indent: 2em;
        }

        .tel .left,
        .tel .right {
            float: left;
            width: 250px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #000;
            text-align: center;
            border-radius: 8px;
        }

        .tel .right {
            float: right;
        }

        .tel span {
            color: #b594fc;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="left">
            <img src="images/Header.png">
        </div>
        <div class="right">
            <ul>
                <li>车主招募</li>
                <li>乘客用车</li>
                <li>关于我们</li>
                <li>联系我们</li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <img src="images/Banner.jpg">
        <ul>
            <li></li>
            <li class="selected"></li>
        </ul>
    </div>
    <div class="info">
        <div class="pic">
            <img src="images/1.jpg">
        </div>
        <div class="content">
            <div class="top">
                <h3>关于美团打车</h3>
                <p>美团打车是美团旗下网约车平台，于2017年2月正式上线，并开始在江苏南京试点运行。美团的使命是“帮大家吃得更好，生活更好”。作为中国领先的生活服务电子商务平台，公司拥有美团、大众点评、美团外卖、美团打车、摩拜单车等消费者熟知的App，服务涵盖餐饮、外卖、打车、共享单车、酒店旅游、电影、休闲娱乐等200多个品类，业务覆盖全国2800个县区市。
                </p>
                <p>打车业务源自美团用户需求驱动，平台用户存在出行需求，网约车业务能够帮助用户便捷实现“吃喝玩乐行”。</p>
                <p>美团打车致力于帮助用户提升出行效率，创造美好生活，将打车与平台吃喝玩乐优势相结合的营销方式，一直是美团打车深入探索的重点。美团打车将持续打通生态，在“出行+消费”的场景串联上创造协同，为用户提供更好体验，为行业注入创新动力。
                </p>
            </div>
            <div class="bottom">
                <h3>客服热线</h3>
                <div class="tel" style="overflow: hidden;">
                    <div class="left">乘客 客服热线 <span>101-001-66</span></div>
                    <div class="right">司机 客服热线 <span>101-001-99</span></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>